<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <body>

        <ui:composition template="./template.xhtml">

            <ui:define name="title">
                Quản lý giải đấu
            </ui:define>

            <ui:define name="content">
                <h:form>
                    <p:panel>
                        <table border="0" cellspacing="5">
                            <tbody>
                                <tr>
                                    <td style="vertical-align: top">
                                        <h:panelGrid columns="2">
                                            Tên giải đấu*     <p:inputText value="#{giaiDauBean.selected.tenGiaiDau}"
                                                                           required="true" requiredMessage="Bạn chưa nhập tên giải đấu"/>
                                            Quốc Gia*    
                                            <p:selectOneMenu value="#{giaiDauBean.selected.quocGia}">
                                                <f:selectItem itemLabel="Việt Nam" itemValue="MB"/>
                                            </p:selectOneMenu>
                                            Châu lục
                                            <p:selectOneMenu value="#{giaiDauBean.selected.chauLuc}">
                                                <f:selectItem itemLabel="Châu Á" itemValue="MB"/>
                                                <f:selectItem itemLabel="Châu Âu" itemValue="MB"/>
                                                <f:selectItem itemLabel="Bắc Mỹ" itemValue="MB"/>
                                                <f:selectItem itemLabel="Nam Mỹ" itemValue="MB"/>
                                                <f:selectItem itemLabel="Châu Phi" itemValue="MB"/>
                                            </p:selectOneMenu>
                                            Cấp độ
                                            <p:selectOneRadio value="#{giaiDauBean.selected.capDo}">
                                                <f:selectItem itemLabel="Đội tuyển" itemValue="MB"/>
                                                <f:selectItem itemLabel="Câu lạc bộ" itemValue="MB"/>
                                            </p:selectOneRadio>
                                        </h:panelGrid>
                                    </td>
                                    <td style="vertical-align: top">
                                        <h:panelGrid columns="2">
                                            Ngày bắt đầu* 
                                            <p:calendar value="#{giaiDauBean.selected.ngayBatDau}" pattern="dd/MM/yyyy HH:mm:ss" timeZone="Asia/Saigon" navigator="true"
                                                        required="true" requiredMessage="Bạn chưa chọn ngày bắt đầu hiệu lực"> 
                                                <p:ajax event="blur" listener="#{giaiDauBean.onChangeStartDate()}" update="cauEndDate cauProvinces"/>
                                            </p:calendar>
                                            Ngày kết thúc* 
                                            <p:calendar id="cauEndDate" value="#{giaiDauBean.selected.ngayKetThuc}" pattern="dd/MM/yyyy HH:mm:ss" timeZone="Asia/Saigon" navigator="true"
                                                        required="true" requiredMessage="Bạn chưa chọn ngày hết hiệu lực"/>
                                            Thể loại* 
                                            <p:inputText value="#{giaiDauBean.selected.theLoai}"
                                                         required="true" requiredMessage="Bạn chưa nhập thể loại"/>
                                            Ghi chú:
                                            <p:inputTextarea value="#{giaiDauBean.selected.ghiChu}"/>
                                        </h:panelGrid>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <h:panelGrid columns="5">
                            <p:commandButton ajax="false" value="Thêm mới" rendered="#{!giaiDauBean.edit}" action="#{giaiDauBean.create()}"/>
                            <p:commandButton ajax="false" value="Cập nhật" rendered="#{giaiDauBean.edit}" action="#{giaiDauBean.edit()}"/>
                            <p:commandButton ajax="false" value="Hủy bỏ" immediate="true" action="#{giaiDauBean.resetToCreateForm()}"/>
                        </h:panelGrid>
                    </p:panel>
                </h:form>
                <br/>
                <h:form>
                    <p:dataTable id="table" value="#{giaiDauBean.list}" var="item" paginator="#{giaiDauBean.list.size() >20}" rows="20" 
                                 selection="#{giaiDauBean.selectedList}" selectionMode="multiple">

                        <f:facet name="header">  
                            <div align="left">
                                <p:menuButton value="Xử lý bản ghi được chọn">  
                                    <p:menuitem ajax="false" value="Chỉnh sửa" icon="ui-icon ui-icon-pencil" action="#{giaiDauBean.prepareEdit()}"/>
                                    <p:menuitem value="Xóa" icon="ui-icon ui-icon-close" onclick="cauDeleteConfirm.show()" />   
                                </p:menuButton> 
                            </div>
                        </f:facet> 

                        <f:facet name="footer">  
                            <div align="left">
                                <p:menuButton value="Xử lý bản ghi được chọn">  
                                    <p:menuitem ajax="false" value="Chỉnh sửa" icon="ui-icon ui-icon-pencil" action="#{giaiDauBean.prepareEdit()}"/>
                                    <p:menuitem value="Xóa" icon="ui-icon ui-icon-close" onclick="cauDeleteConfirm.show()" />   
                                </p:menuButton> 
                            </div>
                        </f:facet> 

                        <p:column headerText="Giải đấu" sortBy="#{item.tenGiaiDau}">
                            #{item.tenGiaiDau}
                        </p:column>
                        <p:column headerText="Quốc gia" sortBy="#{item.quocGia}">
                            #{item.quocGia}
                        </p:column>
                        <p:column headerText="Châu lục" sortBy="#{item.chauLuc}">
                            #{item.chauLuc}
                        </p:column>
                        <p:column headerText="Cấp độ" sortBy="#{item.capDo}">
                            #{item.capDo}
                        </p:column>
                        <p:column headerText="Bắt đầu" sortBy="#{item.ngayBatDau}">
                            <h:outputText value="#{item.ngayBatDau}">
                                <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss" timeZone="Asia/Saigon"/>
                            </h:outputText>
                        </p:column>
                        <p:column headerText="Kết thúc" sortBy="#{item.ngayKetThuc}">
                            <h:outputText value="#{item.ngayKetThuc}">
                                <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss" timeZone="Asia/Saigon"/>
                            </h:outputText>
                        </p:column>
                        <p:column headerText="Thể loại" sortBy="#{item.theLoai}">
                            #{item.theLoai}
                        </p:column>
                    </p:dataTable>

                    <p:confirmDialog modal="true" message="Bạn muốn xóa các bản ghi đã chọn?"  
                                     hideEffect="explode"  
                                     header="Xác nhận" severity="alert" widgetVar="cauDeleteConfirm">  

                        <p:commandButton update="table" value="Có" oncomplete="cauDeleteConfirm.hide()"  
                                         action="#{giaiDauBean.remove()}"/>
                        <p:commandButton value="Không" onclick="cauDeleteConfirm.hide()" type="button" />   

                    </p:confirmDialog> 

                </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>
